<template>
  <div class="intelligent-update-container">
    <h2>MoBox Docker镜像智能更新系统</h2>
    <p class="subtitle">基于智能校验的4步骤更新流程</p>
    
    <!-- 整体进度条 -->
    <div class="overall-progress-section">
      <h3>整体进度</h3>
      <div class="progress-bar-container">
        <div class="progress-bar">
          <div class="progress-fill" :style="{ width: overallProgress + '%' }"></div>
        </div>
        <div class="progress-text">{{ overallProgress }}% - {{ currentStepMessage }}</div>
      </div>
    </div>

    <!-- 执行模式选择 -->
    <div class="mode-selection-section" v-if="!isExecuting && currentStep === 0">
      <h3>执行模式</h3>
      <div class="mode-options">
        <div class="mode-option" :class="{ active: executionMode === 'manual' }" @click="setExecutionMode('manual')">
          <i class="fas fa-hand-pointer"></i>
          <div class="mode-info">
            <h4>手动模式（推荐）</h4>
            <p>逐步执行每个阶段，可以查看详细结果后决定是否继续</p>
          </div>
        </div>
        <div class="mode-option" :class="{ active: executionMode === 'auto' }" @click="setExecutionMode('auto')">
          <i class="fas fa-magic"></i>
          <div class="mode-info">
            <h4>自动模式</h4>
            <p>一键完成全部4个步骤的智能更新流程</p>
          </div>
        </div>
      </div>
      
      <div class="system-info">
        <div class="info-item">
          <i class="fas fa-info-circle text-info"></i>
          <span>系统会自动从LWX平台获取 "上海市大同中学" 的配置信息</span>
        </div>
        <div class="info-item">
          <i class="fas fa-shield-alt text-success"></i>
          <span>智能校验确保仅在必要时执行更新操作</span>
        </div>
      </div>
      
      <div class="action-buttons">
        <button v-if="executionMode === 'manual'" @click="startManualMode" class="btn btn-primary">
          <i class="fas fa-play"></i> 开始手动执行
        </button>
        <button v-if="executionMode === 'auto'" @click="startIntelligentUpdate" class="btn btn-primary">
          <i class="fas fa-magic"></i> 开始自动更新
        </button>
        <button @click="resetProcess" class="btn btn-secondary">
          <i class="fas fa-undo"></i> 重置
        </button>
      </div>
    </div>

    <!-- 4步骤执行展示 -->
    <div class="steps-section" v-if="isExecuting || currentStep > 0">
      <h3>执行步骤</h3>
      
      <!-- 步骤1: LWX平台数据解析 -->
      <div class="step-card" :class="getStepClass(1)">
        <div class="step-header">
          <div class="step-number">1</div>
          <div class="step-info">
            <h4>LWX平台数据解析</h4>
            <p>获取学校信息 + 基础镜像 + 模式匹配compose文件</p>
          </div>
          <div class="step-progress">{{ getStepProgress(1) }}%</div>
          <div class="step-actions" v-if="executionMode === 'manual'">
            <button v-if="steps.lwx_parse.status === 'pending'" 
                    @click="executeLWXParse" 
                    :disabled="currentStep !== 0 && currentStep !== 1"
                    class="btn btn-sm btn-primary">
              <i class="fas fa-play"></i> 执行
            </button>
            <button v-if="steps.lwx_parse.status === 'success' && !allStepsCompleted" 
                    @click="proceedToNextStep(2)" 
                    class="btn btn-sm btn-success">
              <i class="fas fa-arrow-right"></i> 下一步
            </button>
          </div>
        </div>
        <div class="step-details" v-if="steps.lwx_parse.details">
          <div class="detail-item">
            <strong>学校:</strong> {{ steps.lwx_parse.details.school_name }}
          </div>
          <div class="detail-item">
            <strong>基础镜像:</strong> {{ steps.lwx_parse.details.base_image }}
          </div>
          <div class="detail-item">
            <strong>完整URL:</strong> {{ steps.lwx_parse.details.full_image_url }}
          </div>
          <div class="detail-item">
            <strong>匹配的compose文件:</strong> {{ steps.lwx_parse.details.compose_file }}
          </div>
        </div>
        <div class="step-status">{{ steps.lwx_parse.message }}</div>
      </div>

      <!-- 步骤2: 智能镜像版本校验 -->
      <div class="step-card" :class="getStepClass(2)">
        <div class="step-header">
          <div class="step-number">2</div>
          <div class="step-info">
            <h4>智能镜像版本校验</h4>
            <p>检查本地镜像 + 比对版本 + 检查容器状态 + 智能决策</p>
          </div>
          <div class="step-progress">{{ getStepProgress(2) }}%</div>
          <div class="step-actions" v-if="executionMode === 'manual'">
            <button v-if="steps.image_verify.status === 'pending'" 
                    @click="executeImageVerify" 
                    :disabled="currentStep !== 2"
                    class="btn btn-sm btn-primary">
              <i class="fas fa-play"></i> 执行
            </button>
            <button v-if="steps.image_verify.status === 'success' && !allStepsCompleted" 
                    @click="proceedToNextStep(3)" 
                    class="btn btn-sm btn-success">
              <i class="fas fa-arrow-right"></i> 下一步
            </button>
          </div>
        </div>
        <div class="step-details" v-if="steps.image_verify.details">
          <div class="detail-item">
            <strong>本地镜像存在:</strong> 
            <span :class="steps.image_verify.details.local_image_exists ? 'text-success' : 'text-warning'">
              {{ steps.image_verify.details.local_image_exists ? '是' : '否' }}
            </span>
          </div>
          <div class="detail-item">
            <strong>版本一致性:</strong>
            <span :class="steps.image_verify.details.version_match ? 'text-success' : 'text-warning'">
              {{ steps.image_verify.details.version_match ? '一致' : '不一致' }}
            </span>
          </div>
          <div class="detail-item">
            <strong>容器运行状态:</strong>
            <span :class="getContainerStatusClass(steps.image_verify.details.container_status)">
              {{ steps.image_verify.details.container_status }}
            </span>
          </div>
          <div class="detail-item intelligent-decision">
            <strong>智能决策:</strong>
            <span class="decision-text">{{ steps.image_verify.details.decision }}</span>
          </div>
        </div>
        <div class="step-status">{{ steps.image_verify.message }}</div>
      </div>

      <!-- 步骤3: 条件性镜像拉取 -->
      <div class="step-card" :class="getStepClass(3)">
        <div class="step-header">
          <div class="step-number">3</div>
          <div class="step-info">
            <h4>条件性镜像拉取</h4>
            <p>仅在步骤2判断需要更新时执行拉取操作</p>
          </div>
          <div class="step-progress">{{ getStepProgress(3) }}%</div>
          <div class="step-actions" v-if="executionMode === 'manual'">
            <button v-if="steps.conditional_pull.status === 'pending'" 
                    @click="executeConditionalPull" 
                    :disabled="currentStep !== 3"
                    class="btn btn-sm btn-primary">
              <i class="fas fa-play"></i> 执行
            </button>
            <button v-if="steps.conditional_pull.status === 'success' && !allStepsCompleted" 
                    @click="proceedToNextStep(4)" 
                    class="btn btn-sm btn-success">
              <i class="fas fa-arrow-right"></i> 下一步
            </button>
          </div>
        </div>
        <div class="step-details" v-if="steps.conditional_pull.details">
          <div class="detail-item">
            <strong>是否需要拉取:</strong>
            <span :class="steps.conditional_pull.details.needs_pull ? 'text-warning' : 'text-success'">
              {{ steps.conditional_pull.details.needs_pull ? '是' : '否（跳过拉取）' }}
            </span>
          </div>
          <div class="detail-item" v-if="steps.conditional_pull.details.needs_pull">
            <strong>拉取进度:</strong> {{ steps.conditional_pull.details.pull_progress || '0%' }}
          </div>
          <div class="detail-item" v-if="steps.conditional_pull.details.skip_reason">
            <strong>跳过原因:</strong> {{ steps.conditional_pull.details.skip_reason }}
          </div>
        </div>
        <div class="step-status">{{ steps.conditional_pull.message }}</div>
      </div>

      <!-- 步骤4: 智能容器重建 -->
      <div class="step-card" :class="getStepClass(4)">
        <div class="step-header">
          <div class="step-number">4</div>
          <div class="step-info">
            <h4>智能容器重建</h4>
            <p>基于校验结果执行容器操作（重建/启动/跳过）</p>
          </div>
          <div class="step-progress">{{ getStepProgress(4) }}%</div>
          <div class="step-actions" v-if="executionMode === 'manual'">
            <button v-if="steps.container_rebuild.status === 'pending'" 
                    @click="executeContainerRebuild" 
                    :disabled="currentStep !== 4"
                    class="btn btn-sm btn-primary">
              <i class="fas fa-play"></i> 执行
            </button>
            <span v-if="steps.container_rebuild.status === 'success'" 
                  class="completion-badge">
              <i class="fas fa-check-circle text-success"></i> 完成
            </span>
          </div>
        </div>
        <div class="step-details" v-if="steps.container_rebuild.details">
          <div class="detail-item">
            <strong>执行操作:</strong>
            <span class="action-text">{{ steps.container_rebuild.details.action_taken }}</span>
          </div>
          <div class="detail-item" v-if="steps.container_rebuild.details.containers_affected">
            <strong>影响容器:</strong> {{ steps.container_rebuild.details.containers_affected.join(', ') }}
          </div>
          <div class="detail-item">
            <strong>最终状态:</strong>
            <span :class="steps.container_rebuild.details.final_status === 'success' ? 'text-success' : 'text-error'">
              {{ steps.container_rebuild.details.final_status }}
            </span>
          </div>
        </div>
        <div class="step-status">{{ steps.container_rebuild.message }}</div>
      </div>
    </div>

    <!-- 执行结果汇总 -->
    <div class="result-section" v-if="isCompleted">
      <h3>执行结果汇总</h3>
      <div class="result-summary">
        <div class="summary-item">
          <strong>总体结果:</strong>
          <span :class="finalResult.success ? 'text-success' : 'text-error'">
            {{ finalResult.success ? '✅ 成功' : '❌ 失败' }}
          </span>
        </div>
        <div class="summary-item">
          <strong>执行时间:</strong> {{ finalResult.execution_time }}秒
        </div>
        <div class="summary-item">
          <strong>操作类型:</strong> {{ finalResult.action_taken }}
        </div>
        <div class="summary-item">
          <strong>结果描述:</strong> {{ finalResult.message }}
        </div>
      </div>
      <button @click="resetProcess" class="btn btn-primary">
        <i class="fas fa-redo"></i> 重新开始
      </button>
    </div>

    <!-- 实时日志 -->
    <div class="logs-section">
      <h3>实时日志</h3>
      <div class="logs-container">
        <div v-for="(log, index) in logs" :key="index" 
             class="log-entry" 
             :class="'log-' + log.level">
          <span class="log-time">{{ log.time }}</span>
          <span class="log-level">[{{ log.level.toUpperCase() }}]</span>
          <span class="log-message">{{ log.message }}</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'IntelligentUpdateContainer',
  data() {
    return {
      // 执行模式
      executionMode: 'manual', // 默认手动模式
      
      // 配置参数 - 自动从LWX平台获取
      schoolName: '上海市大同中学',
      baseImage: 'mobox-python-hardware',
      
      // 执行状态
      isExecuting: false,
      isCompleted: false,
      currentStep: 0,
      overallProgress: 0,
      currentStepMessage: '选择执行模式开始...',
      
      // 步骤数据
      steps: {
        lwx_parse: {
          status: 'pending',
          message: '等待执行...',
          details: null
        },
        image_verify: {
          status: 'pending', 
          message: '等待执行...',
          details: null
        },
        conditional_pull: {
          status: 'pending',
          message: '等待执行...',
          details: null
        },
        container_rebuild: {
          status: 'pending',
          message: '等待执行...',
          details: null
        }
      },
      
      // 最终结果
      finalResult: {
        success: false,
        execution_time: 0,
        action_taken: '',
        message: ''
      },
      
      // 日志
      logs: []
    }
  },
  
  computed: {
    allStepsCompleted() {
      return this.steps.container_rebuild.status === 'success'
    }
  },
  
  mounted() {
    this.addLog('info', '智能更新系统已初始化，请选择执行模式')
  },
  
  methods: {
    setExecutionMode(mode) {
      this.executionMode = mode
      this.addLog('info', `切换到${mode === 'manual' ? '手动' : '自动'}模式`)
    },
    
    startManualMode() {
      this.currentStep = 1
      this.currentStepMessage = '手动模式已启动，请逐步执行各个阶段'
      this.addLog('info', '开始手动执行模式')
    },
    
    proceedToNextStep(nextStep) {
      this.currentStep = nextStep
      this.currentStepMessage = `准备执行步骤${nextStep}`
      this.addLog('info', `准备执行步骤${nextStep}`)
    },
    
    async startIntelligentUpdate() {
      this.isExecuting = true
      this.isCompleted = false
      this.currentStep = 1
      this.overallProgress = 0
      this.addLog('info', `开始智能更新流程: ${this.schoolName} - ${this.baseImage}`)
      
      const startTime = Date.now()
      
      try {
        // 步骤1: LWX平台数据解析
        await this.executeLWXParse()
        
        // 步骤2: 智能镜像版本校验
        await this.executeImageVerify()
        
        // 步骤3: 条件性镜像拉取
        await this.executeConditionalPull()
        
        // 步骤4: 智能容器重建
        await this.executeContainerRebuild()
        
        // 完成
        this.finalResult = {
          success: true,
          execution_time: ((Date.now() - startTime) / 1000).toFixed(1),
          action_taken: this.steps.container_rebuild.details?.action_taken || '未知',
          message: '智能更新流程执行成功'
        }
        
      } catch (error) {
        this.finalResult = {
          success: false,
          execution_time: ((Date.now() - startTime) / 1000).toFixed(1),
          action_taken: '执行失败',
          message: error.message
        }
        this.addLog('error', `智能更新失败: ${error.message}`)
      } finally {
        this.isExecuting = false
        this.isCompleted = true
        this.overallProgress = 100
        this.currentStepMessage = '流程完成'
      }
    },
    
    async executeLWXParse() {
      this.currentStep = 1
      this.currentStepMessage = '正在从LWX平台获取学校信息和镜像配置...'
      this.steps.lwx_parse.status = 'running'
      this.steps.lwx_parse.message = '正在连接LWX平台...'
      this.addLog('info', '步骤1: 开始LWX平台数据解析')
      
      try {
        // 自动从LWX平台获取配置，无需手动输入参数
        const response = await fetch('/api/intelligent-updates/v2/lwx-parse', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({}) // 空参数，让后端自动获取
        })
        
        const result = await response.json()
        
        if (result.success) {
          this.steps.lwx_parse.status = 'success'
          this.steps.lwx_parse.message = '✅ LWX平台数据解析完成'
          this.steps.lwx_parse.details = result.data
          this.overallProgress = 20
          this.addLog('success', `LWX解析成功: 学校=${result.data.school_name}, 镜像=${result.data.base_image}`)
        } else {
          throw new Error(result.message || 'LWX解析失败')
        }
      } catch (error) {
        this.steps.lwx_parse.status = 'error'
        this.steps.lwx_parse.message = '❌ LWX平台数据解析失败'
        throw error
      }
    },
    
    async executeImageVerify() {
      this.currentStep = 2
      this.currentStepMessage = '正在进行智能镜像版本校验...'
      this.steps.image_verify.status = 'running'
      this.steps.image_verify.message = '正在检查本地镜像和容器状态...'
      this.addLog('info', '步骤2: 开始智能镜像版本校验')
      
      // 模拟2-4秒的执行时间
      await new Promise(resolve => setTimeout(resolve, 2000))
      
      try {
        const response = await fetch('/api/intelligent-updates/v2/image-verify', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            full_image_url: this.steps.lwx_parse.details.full_image_url,
            container_name: `${this.baseImage}-service`
          })
        })
        
        const result = await response.json()
        
        if (result.success) {
          this.steps.image_verify.status = 'success'
          this.steps.image_verify.message = '✅ 智能镜像版本校验完成'
          this.steps.image_verify.details = result.data.verification_result  // 直接存储verification_result
          this.overallProgress = 40
          this.addLog('success', `智能决策: ${result.data.verification_result.decision}`)
        } else {
          throw new Error(result.message || '镜像校验失败')
        }
      } catch (error) {
        this.steps.image_verify.status = 'error'
        this.steps.image_verify.message = '❌ 智能镜像版本校验失败'
        throw error
      }
    },
    
    async executeConditionalPull() {
      this.currentStep = 3
      this.currentStepMessage = '正在执行条件性镜像拉取...'
      this.steps.conditional_pull.status = 'running'
      
      const needsPull = this.steps.image_verify.details?.needs_action
      const actionType = this.steps.image_verify.details?.action_type
      
      this.addLog('info', `步骤3: 开始条件性镜像拉取，需要操作: ${needsPull}`)
      
      try {
        // 调用后端API进行条件性拉取
        const response = await fetch('/api/intelligent-updates/v2/conditional-pull', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            action_type: actionType || 'create',
            image_url: this.steps.lwx_parse.details?.full_image_url || ''
          })
        })
        
        const result = await response.json()
        
        if (result.success) {
          this.steps.conditional_pull.status = 'success'
          this.steps.conditional_pull.message = `✅ ${result.message}`
          this.steps.conditional_pull.details = result.data
          this.overallProgress = 70
          
          if (result.data.needs_pull) {
            this.addLog('success', `镜像拉取成功: ${result.data.pulled_image || result.data.image_url}`)
          } else {
            this.addLog('info', `跳过镜像拉取: ${result.data.reason || result.message}`)
          }
        } else {
          throw new Error(result.message || '条件性镜像拉取失败')
        }
      } catch (error) {
        this.steps.conditional_pull.status = 'error'
        this.steps.conditional_pull.message = '❌ 条件性镜像拉取失败'
        this.addLog('error', `步骤3失败: ${error.message}`)
        throw error
      }
    },
    
    async executeContainerRebuild() {
      this.currentStep = 4
      this.currentStepMessage = '正在执行智能容器重建...'
      this.steps.container_rebuild.status = 'running'
      this.steps.container_rebuild.message = '正在根据校验结果执行容器操作...'
      this.addLog('info', '步骤4: 开始智能容器重建')
      
      await new Promise(resolve => setTimeout(resolve, 3000))
      
      try {
        const response = await fetch('/api/intelligent-updates/v2/container-rebuild', {
          method: 'POST',
          headers: { 'Content-Type': 'application/json' },
          body: JSON.stringify({
            action_type: this.steps.image_verify.details?.action_type || 'create',
            container_name: this.steps.lwx_parse.details?.container_name || 'mobox-python-hardware-service',
            image_url: this.steps.lwx_parse.details?.full_image_url || '',  // 修正参数名
            school_name: this.steps.lwx_parse.details?.school_name || '上海市大同中学'
          })
        })
        
        const result = await response.json()
        
        if (result.success) {
          this.steps.container_rebuild.status = 'success'
          this.steps.container_rebuild.message = '✅ 智能容器重建完成'
          this.steps.container_rebuild.details = result.data
          this.overallProgress = 100
          this.addLog('success', `容器重建成功: ${result.data.action_taken}`)
        } else {
          throw new Error(result.message || '容器重建失败')
        }
      } catch (error) {
        this.steps.container_rebuild.status = 'error'
        this.steps.container_rebuild.message = '❌ 智能容器重建失败'
        throw error
      }
    },
    
    resetProcess() {
      this.isExecuting = false
      this.isCompleted = false
      this.currentStep = 0
      this.overallProgress = 0
      this.currentStepMessage = '选择执行模式开始...'
      this.executionMode = 'manual' // 重置为默认手动模式
      
      // 重置所有步骤
      Object.keys(this.steps).forEach(key => {
        this.steps[key] = {
          status: 'pending',
          message: '等待执行...',
          details: null
        }
      })
      
      this.finalResult = {
        success: false,
        execution_time: 0,
        action_taken: '',
        message: ''
      }
      
      this.addLog('warning', '流程已重置，回到初始状态')
    },
    
    getStepClass(stepNumber) {
      if (stepNumber < this.currentStep) return 'step-completed'
      if (stepNumber === this.currentStep) return 'step-active'
      return 'step-pending'
    },
    
    getStepProgress(stepNumber) {
      if (stepNumber === 1) return this.overallProgress >= 20 ? 20 : Math.min(this.overallProgress, 20)
      if (stepNumber === 2) return this.overallProgress >= 40 ? 20 : Math.max(0, this.overallProgress - 20)
      if (stepNumber === 3) return this.overallProgress >= 70 ? 30 : Math.max(0, this.overallProgress - 40)
      if (stepNumber === 4) return Math.max(0, this.overallProgress - 70)
      return 0
    },
    
    getContainerStatusClass(status) {
      switch (status) {
        case '运行中': return 'text-success'
        case '已停止': return 'text-warning'
        case '不存在': return 'text-error'
        default: return 'text-neutral'
      }
    },
    
    addLog(level, message) {
      this.logs.unshift({
        time: new Date().toLocaleTimeString(),
        level,
        message
      })
      
      if (this.logs.length > 50) {
        this.logs = this.logs.slice(0, 50)
      }
    }
  }
}
</script>

<style scoped>
.intelligent-update-container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 20px;
  background: #f8f9fa;
}

.subtitle {
  color: #666;
  margin-bottom: 30px;
}

.overall-progress-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.progress-bar-container {
  margin-top: 10px;
}

.progress-bar {
  width: 100%;
  height: 20px;
  background: #e9ecef;
  border-radius: 10px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #007bff, #28a745);
  transition: width 0.3s ease;
}

.progress-text {
  text-align: center;
  margin-top: 8px;
  font-weight: bold;
  color: #495057;
}

.mode-selection-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.mode-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 15px;
  margin-bottom: 20px;
}

.mode-option {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  padding: 15px;
  cursor: pointer;
  transition: all 0.3s;
  display: flex;
  align-items: center;
  gap: 15px;
}

.mode-option:hover {
  border-color: #007bff;
  background: #f8f9fa;
}

.mode-option.active {
  border-color: #007bff;
  background: #e3f2fd;
  box-shadow: 0 2px 8px rgba(0,123,255,0.2);
}

.mode-option i {
  font-size: 24px;
  color: #007bff;
}

.mode-info h4 {
  margin: 0 0 5px 0;
  color: #212529;
}

.mode-info p {
  margin: 0;
  color: #6c757d;
  font-size: 14px;
}

.system-info {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 6px;
  margin-bottom: 15px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 8px;
  font-size: 14px;
}

.info-item:last-child {
  margin-bottom: 0;
}

.step-actions {
  display: flex;
  gap: 8px;
  align-items: center;
}

.btn-sm {
  padding: 5px 12px;
  font-size: 12px;
}

.completion-badge {
  display: flex;
  align-items: center;
  gap: 5px;
  font-weight: bold;
  color: #28a745;
}

.config-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.input-group {
  margin-bottom: 15px;
}

.input-group label {
  display: block;
  margin-bottom: 5px;
  font-weight: bold;
}

.input-group input, .input-group select {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 14px;
}

.action-buttons {
  display: flex;
  gap: 10px;
  margin-top: 20px;
}

.btn {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: all 0.2s;
}

.btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.btn-primary {
  background: #007bff;
  color: white;
}

.btn-primary:hover:not(:disabled) {
  background: #0056b3;
}

.btn-secondary {
  background: #6c757d;
  color: white;
}

.steps-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.step-card {
  border: 2px solid #e9ecef;
  border-radius: 8px;
  margin-bottom: 15px;
  padding: 15px;
  transition: all 0.3s;
}

.step-pending {
  border-color: #e9ecef;
  background: #f8f9fa;
}

.step-active {
  border-color: #007bff;
  background: #e3f2fd;
  box-shadow: 0 2px 8px rgba(0,123,255,0.2);
}

.step-completed {
  border-color: #28a745;
  background: #e8f5e8;
}

.step-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
}

.step-number {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #007bff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: bold;
  margin-right: 15px;
}

.step-completed .step-number {
  background: #28a745;
}

.step-info {
  flex: 1;
}

.step-info h4 {
  margin: 0 0 5px 0;
  color: #212529;
}

.step-info p {
  margin: 0;
  color: #6c757d;
  font-size: 14px;
}

.step-progress {
  font-weight: bold;
  color: #007bff;
}

.step-details {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  margin: 10px 0;
}

.detail-item {
  margin-bottom: 5px;
  font-size: 14px;
}

.intelligent-decision {
  background: #fff3cd;
  padding: 8px;
  border-radius: 4px;
  border-left: 4px solid #ffc107;
}

.decision-text {
  font-weight: bold;
  color: #856404;
}

.action-text {
  font-weight: bold;
  color: #155724;
}

.step-status {
  margin-top: 10px;
  font-weight: bold;
}

.text-success { color: #28a745; }
.text-warning { color: #ffc107; }
.text-error { color: #dc3545; }
.text-neutral { color: #6c757d; }

.result-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.result-summary {
  background: #f8f9fa;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 15px;
}

.summary-item {
  margin-bottom: 8px;
  font-size: 14px;
}

.logs-section {
  background: white;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

.logs-container {
  background: #f8f9fa;
  padding: 10px;
  border-radius: 4px;
  max-height: 300px;
  overflow-y: auto;
  font-family: monospace;
  font-size: 13px;
}

.log-entry {
  margin-bottom: 5px;
  padding: 5px;
  border-radius: 3px;
}

.log-info { background: rgba(0,123,255,0.1); }
.log-success { background: rgba(40,167,69,0.1); }
.log-warning { background: rgba(255,193,7,0.1); }
.log-error { background: rgba(220,53,69,0.1); }

.log-time {
  color: #666;
  margin-right: 8px;
}

.log-level {
  font-weight: bold;
  margin-right: 8px;
}

.log-info .log-level { color: #007bff; }
.log-success .log-level { color: #28a745; }
.log-warning .log-level { color: #ffc107; }
.log-error .log-level { color: #dc3545; }
</style>